<template>
	<view class="page">
		<u-navbar :border-bottom='false' title-bold="true" style="font-weight: 1200;"  title="申请售后">
		</u-navbar>
		<u-toast ref="uToast"></u-toast>
		<!-- 商品 -->
		<view style="padding-left: 4%;padding-right:4%;background-color: #FFFFFF;">
			<u-form :model="form" ref="uForm" >
				<u-form-item label="售后类型" label-width="160">
					<u-input v-model="typeText" type="select"  @click="typePickShow = true" />
					<u-action-sheet :list="typeList" v-model="typePickShow" @click="typePickClick"></u-action-sheet>
				</u-form-item>
				<u-form-item label="申请原因" label-width="160">
					<u-input v-model="reasonText" type="select"  @click="reasonPickShow = true" />
					<u-action-sheet :list="reasonList" v-model="reasonPickShow" @click="reasonPickClick"></u-action-sheet>
				</u-form-item>
				<u-form-item label="退款金额" label-position="top" label-width="160">
					<u-field label="¥" :border-bottom='false' :field-style='font' label-width="30" @blur="fixAmount" v-model="form.amount" :placeholder="'您最多可以申请'+maxAmount+'元'"/>
					<u-button slot="right" type="info" size="mini" @click="max">最大</u-button>
				</u-form-item>
				<u-form-item label="退款备注" label-width="160">
					<u-input type="textarea" height="160"  placeholder="请填写备注" v-model="model.remark" />
				</u-form-item>
				<u-form-item label="联系方式" label-width="160">
					<u-input type="text"  placeholder="您的手机号" v-model="model.userPhone" />
				</u-form-item>
				
			</u-form>
				
		
		</view>
		<view style="margin-top:20rpx;width: 90%;margin-left: 5%;">
			<button class="bg-grey" @click="submit">提交</button>
		</view>

		
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				font:{'font-size':'40rpx'},
				typePickShow:false,
				maxAmount:0,
				form:{
					amount:'',
					userPhone:'',
					remark:'',
				},
				typeText:'请选择',
				typeList: [
					{
						text: '仅退款(无需退货)',
						v:12
					},
					{
						text: '退货退款',
						v:11
					}
				],
				reasonPickShow:false,
				reasonText:'请选择',
				reasonList: [
					{
						text: '多拍/错拍/不想要',
						v:1
					},
					{
						text: '质量差',
						v:2
					},
					{
						text: '与描述不符',
						v:3
					},
					{
						text: '服务态度不好',
						v:4
					},
					{
						text: '其他',
						v:0
					}
				],
			};
		},
		onLoad(v){
			this.maxAmount=v.amount
			if(v.afterId!==undefined){
				this.form.id=v.afterId
			}
			this.form.orderId=v.id
			
			
		},
		methods:{
			submit(){
				this.$u.api.afterSubmit(this.form).then(res=>{
					this.$refs.uToast.show({
						title: '申请成功,等待商家处理',
						duration:500,
						type: 'success',
						back:true
					})
				})
			},
			fixAmount(){
				if(Number(this.form.amount)>Number(this.maxAmount)){
					this.form.amount=this.maxAmount
				}
			},
			max(){
				this.form.amount=this.maxAmount
			},
			
			// 点击actionSheet回调
			typePickClick(index) {
				this.typeText=this.typeList[index].text
				this.form.type = this.typeList[index].v;
			},
			reasonPickClick(index) {
				this.reasonText=this.reasonList[index].text
				this.form.reason = this.reasonList[index].v;
			},
			
		}
	}
</script>

<style scoped lang="scss">
	@import 'afterSaleType.scss';
</style>
